<template>
  <div class="my-special-effects4">
    <div class="gb-bubble green">
      <div class="gb-bubble-box">
        <div class="gb-bubble-border"></div>
        <div class="gb-bubble-box-light"></div>
        <div class="gb-bubble-box-light"></div>
      </div>
      <div class="gb-bubble-content">
        <div>绿色</div>
      </div>
    </div>
    <div class="gb-bubble blue">
      <div class="gb-bubble-box">
        <div class="gb-bubble-border"></div>
        <div class="gb-bubble-box-light"></div>
        <div class="gb-bubble-box-light"></div>
      </div>
      <div class="gb-bubble-content">
        <div>蓝色</div>
      </div>
    </div>
    <div class="gb-bubble red">
      <div class="gb-bubble-box">
        <div class="gb-bubble-border"></div>
        <div class="gb-bubble-box-light"></div>
        <div class="gb-bubble-box-light"></div>
      </div>
      <div class="gb-bubble-content">
        <div>红色</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss">
/* 气泡 */
@mixin my-special-effects2-gb-bubble($class, $color, $textColor) {
  height: 210px;
  width: 210px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 1px solid $color;
  padding: 8px;
  position: relative;
  z-index: 10;
  cursor: default;
  * {
    box-sizing: border-box;
    transition: all 200ms ease;
  }
  .#{$class}-box{
    border-radius: 50%;
    height: 100%;
    width: 100%;
    border: 4px solid $color;
    padding: 6px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    &:before{
      content: "";
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-image: linear-gradient(to bottom, rgba($color, .4) 0%, transparent 8%);
      position: absolute;
      top: 0;
      left: 0;
    }
    &-light {
      filter: blur(18px);
      width: 135px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) scaleY(.85);
      &:before{
        content: "";
        display: block;
        width: 135px;
        height: 135px;
        border-radius: 50%;
        box-sizing: border-box;
        border-bottom: 35px solid $color;
        border-left: 35px solid $color;
        transform-origin: center;
        transform: scaleY(0.5) rotate(-45deg);
        position: absolute;
        bottom: -20px;
      }
      &:after {
        content: "";
        display: block;
        width: 90px;
        height: 30px;
        background-color: $color;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  .#{$class}-border{
    border-radius: 50%;
    height: 100%;
    width: 100%;
    background-color: rgba($color, .1);
    position: relative;
    &:before{
      content: "";
      filter: blur(1px);
      border-radius: 50%;
      border: 2px solid scale-color($color, $lightness: 30%);
      mask: linear-gradient(to bottom, #000 3%, transparent 7%, transparent 93%, #000 97%);
      position: absolute;
      top: -2px;
      left: 0;
      right: 0;
      bottom: -2px;
      transition: transform 1000ms ease-in-out;
    }
  }
  .#{$class}-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-shadow: 0 0 0 $color;
    color: $textColor;
    font-size: 34px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    transition: all 200ms linear;
  }
  &:hover{
    filter: contrast(150%) brightness(150%);
    .#{$class}-box{
      box-shadow: 0 0 25px 0 $color, 0 0 20px $color inset;
    }
    .#{$class}-border:before{
      transform: rotate(360deg);
    }
    .#{$class}-content{
      text-shadow: 0 0 5px rgba($color, .5);
      color: scale-color($textColor, $lightness: 40%);
    }
  }
}

.my-special-effects4{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #03081E;
  .gb-bubble{
    flex: none;
    margin: 15px;
    &.green{
      @include my-special-effects2-gb-bubble('gb-bubble', #3CCFAE, #1fd548);
      animation: my-special-effects2-gb-bubble 4s 0s ease-in-out infinite alternate;
    }
    &.blue{
      @include my-special-effects2-gb-bubble('gb-bubble', #2786F4, #2792FF);
      animation: my-special-effects2-gb-bubble 4s 1s ease-in-out infinite alternate;
    }
    &.red{
      @include my-special-effects2-gb-bubble('gb-bubble', #fd3e7a, #ff3269);
      animation: my-special-effects2-gb-bubble 4s 2s ease-in-out infinite alternate;
    }
  }
}
@keyframes my-special-effects2-gb-bubble{
  to{
    transform: translateY(20px);
  }
  from{
    transform: translateY(0px);
  }
}
</style>